<template>
  <button class="widget-button" :style="style" @click="clickHandler">
    {{cptData.value}}
  </button>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";

export default {
  name: 'widget-button',
  cnName: 'widgetButton',
  mixins: [refreshMixin],
  props: {
    option: Object
  },
  data() {
    return {}
  },
  methods: {},
  computed: {
    style() {
      const attribute = this.option.attribute
      const style = {
        color: attribute.color,
        fontSize: attribute.fontSize + 'px',
        background: attribute.bgColor,
        borderRadius: attribute.radius + 'px',
        border: `${attribute.borderWidth}px ${attribute.borderType} ${attribute.borderColor}`
      }
      return style
    }
  }
}
</script>

<style lang="less" scoped>
.widget-button {
  width: 100%;
  height: 100%;
  text-align: center;
  outline: none;
  border: none;
}
</style>
